.component__auto-size-input-field {
  box-sizing: border-box;
  color: $core-fleet-black;

  &::placeholder {
    color: $ui-fleet-black-50;
  }

  &:focus {
    outline: none;
    border-color: $core-fleet-black;
  }

  .input-sizer {
    display: inline-grid;
    align-items: center;
    position: relative;

    &::after,
    input,
    textarea {
      white-space: pre-wrap;
      width: auto;
      grid-area: 1 / 2;
      resize: none;
      background: none;
      appearance: none;
      border: none;
      line-height: $line-height;
    }

    textarea {
      height: 100%;
    }

    &::after {
      content: attr(data-value) " ";
      visibility: hidden;
    }
  }
}
